<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/mainPage.css">
    <link rel="stylesheet" href="/css/nav-top.css">
    <link rel="stylesheet" href="/css/Product.css">
    <link rel="shortcut icon" href="https://pets-1046189-pic45.websiteonline.cn/upload/favicon-20190621040405750.ico" type="image/x-icon"/>
<!--    <script src="https://kit.fontawesome.com/59c20db7cc.js" crossorigin="anonymous"></script>-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            background-color: #eeeeee;
        }

        nav {
            width: 96%;
            height: 500px; /* only for demonstration, should be removed */
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="nav-top-1">
    <div class="nav_logo">
        <span  >JPetStore</span>
    </div>
    <div class="nav_search">
        <div id="search">
            <input type="text" class="search_input" id="keyword">
        </div>
        <div id="productAutoComplete">
            <ul id="productAutoList"></ul>
        </div>
    </div>
    <ul class="nav_link">
        <li class="nav-top-item">
            <a href="#" class="link"  >设置</a>
        </li>
        <li class="nav-top-item">
            <a href="#" class="link"  >订单</a>
        </li>
        <li class="nav-top-item">
            <a href="02.html" class="link"><span style="color:#215496;font-weight:bold">商品</span></a>
        </li>
        <li class="nav-top-item">
            <a href="01.html" class="link"  >首页</a>
        </li>
    </ul>
</div>

<section>
    <nav class="">
        <div class="page-wrap w">
            <div class="panel">
                <div class="panel-title">商品信息</div>
                <div class="panel-body">
                    <table class="product-table" id="productList" th:value="${productList}">
                        <tr id="column">
                            <th class="cell-img">&nbsp;</th>
                            <th class="cell-product">Product ID</th>
                            <th class="cell-name">Product Name</th>
                            <th class="cell-description">Description</th>
                            <th class="cell-quantity">Quantity</th>
                            <th class="cell-price">List Price</th>
                            <th class="cell-setting"> </th>
                        </tr>
                        <tr th:each="product : ${productList}" th:id="${product.productId}">
                            <td class="userId" th:text="${product.userid}" hidden></td>
                            <td class="cell-img">

                                <a th:href="@{/productUpdate(userId=${account.getUserid()},productId=${product.productId})}"><img id="myImage" th:src="@{/showImage.do(productId=${product.productId})}"  class="product-img"></a>
                            </td>
                            <td th:text="${product.productId}" class="cell-item" ></td>
                            <td th:text="${product.name}" class="cell-product"></td>
                            <td th:text="${product.description}" class="cell-description"></td>
                            <td th:text="${product.quantity}" class="cell-quantity"></td>
                            <td th:text="${product.price}" class="cell-price"></td>
                            <td class="cell-setting">
                                <div class="submit-content">
                                        <span class="btn order-submit">
                                            <div class="context">删除商品</div>
                                        </span>
                                </div>
                            </td>
                        </tr>
                    </table>

                    <div class="address-item">
                        <a th:href="@{/addProduct(userId=${account.getUserid()})}">
                            <div class="address-add">
                                <i class="fa fa-plus"></i>
                                <div class="link-text">添加新商品</div>
                            </div>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </nav>
</section>
<div id="whole" style="display: none" class="whole">
    <div id="floatingWindow" style="display: none"></div>
</div>

<script src="/js/product.js" type="text/javascript"></script>
</body>
</html>